<template>
    <div id="app">
        <el-container class="home-container">
            <el-header>
                <span style="margin-left: 50px;color:rgb(234,237,241)" v-if="zelin">后台管理系统
                </span>
                <span :class="navIcon" style="color:#fff;font-size: 22px;position: absolute;left:20px;cursor:pointer"
                      @click="switchMenu"></span>
                <el-button type="default" style="position: absolute;right:10px">退出</el-button>
            </el-header>
            <el-container>
                <el-aside :width="menuWidth">
                    <!--el-menu:代表菜单-->
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            background-color="#333744"
                            text-color="#fff"
                            active-text-color="#409EFF"
                            unique-opened
                            router
                            :default-active="$route.path"
                            :collapse="collapse"
                            :collapse-transition="false">
                        <!--el-submenu:代表一级子菜单-->
                        <el-submenu :index="index+''" v-for="(menu,index) in menus" :key="index">
                            <template slot="title">
                                <i :class="menu.action"></i>
                                <span> {{menu.name}} </span>
                            </template>
                            <!--el-menu-item:代表二级子菜单-->
                            <el-menu-item :index="submenu.path" v-for="(submenu,subindex) in menu.children"
                                          :key="subindex">
                                <template slot="title">
                                    <i :class="submenu.action"></i>
                                    <span>{{submenu.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>

                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
    // 1. 导入菜单文件
    import menus from "./assets/js/menus";
    export default {
        name: 'App',
        data() {
            return {
                menus: menus,
                menuWidth: '200px',
                flag: false,
                collapse: false,
                zelin:true,
                navIcon: 'el-icon-s-unfold'
            }
        },
        methods: {
            // 2. 切换菜单
            switchMenu() {
                if (!this.flag) {
                    this.menuWidth = "52px";
                    this.navIcon = "el-icon-s-unfold";
                    this.collapse = true;
                    this.zelin = false;
                } else {
                    this.menuWidth = "200px";
                    this.navIcon = "el-icon-s-fold";
                    this.collapse = false;
                    this.zelin = true;
                }
                this.flag = !this.flag;

            }
        },
    }
</script>

<style lang="less" scoped>
    .home-container {
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
    }

    .el-header {
        /*background-color: #373d41;*/
        background-color: rgb(51,55,68);
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;
            span {
                margin-left: 15px;
            }
        }
    }

    .el-aside {
        background-color: #333744;

        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }

    .iconfont {
        margin-right: 10px;
    }

</style>
